import React, { Component } from 'react';
// import { Icon } from 'antd'
import { LikeOutlined, MessageOutlined, ShareAltOutlined,LikeTwoTone } from '@ant-design/icons';
import { Toast } from 'antd-mobile';
class contentFooter extends Component {
    constructor(props) {
        super(props)
        this.state = {
            like: 100,
            liked: 'null',
        };
    }
    componentDidMount() {
        let data = this.props.data

        this.setState({
            like: data.articleFabulousCount
        })
    }
    islike = () => {
        let liked = this.state.liked;
        if (liked === 'like') {
            Toast.info('已经点过赞了', 1)
            return
        }
        this.setState({
            like: this.state.like + 1,
            liked: 'like'
        });
        // axios 请求数据
    }

    render() {
        let data = this.props.data
        console.log(this.state.liked)
        return (
            <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-around' }}>
                <div onClick={this.islike}>
                {this.state.liked === 'null'?
                        <LikeOutlined style={{ color: '#949494', fontSize: 20 }} ></LikeOutlined>
                        : <LikeTwoTone style={{fontSize: 20 }} />
                }
                    <span style={{ marginLeft: '10px', fontSize: '13px', color: '#949494' }}>{this.state.like}</span>
                </div>

                <div>
                    <MessageOutlined style={{ color: '#949494', fontSize: 20 }}></MessageOutlined>
                    <span style={{ marginLeft: '10px', fontSize: '13px', color: '#949494' }}>{data.articleCommentCount}</span>

                </div>
                <div>
                    <ShareAltOutlined style={{ color: '#949494', fontSize: 20 }}></ShareAltOutlined>
                    <span style={{ marginLeft: '10px', fontSize: '13px', color: '#949494' }}>分享</span>

                </div>
            </div>
        );
    }
}

export default contentFooter;